import React, { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import '../styles/splash.scss';

const SplashScreen: React.FC = () => {
    const [animationComplete, setAnimationComplete] = useState(false);
    const navigate = useNavigate();

    useEffect(() => {
        // 延迟后自动跳转到主页
        const timer = setTimeout(() => {
            setAnimationComplete(true);
            setTimeout(() => {
                navigate('/home');
            }, 500);
        }, 3000);

        return () => {
            clearTimeout(timer);
        };
    }, [navigate]);

    // 点击"立即体验"按钮
    const handleExperience = () => {
        setAnimationComplete(true);
        setTimeout(() => {
            navigate('/home');
        }, 300);
    };

    return (
        <div className={`splash-container ${animationComplete ? 'fade-out' : ''}`}>
            <div className="splash-content">
                <div className="logo-container">
                    <div className="heart-rate-icon">
                        <div className="heart"></div>
                        <div className="ecg-line"></div>
                    </div>
                </div>

                <h1 className="app-title">医预通</h1>

                <div className="app-slogan">
                    <p>健康的线上预约挂号平台</p>
                </div>

                <button className="experience-btn" onClick={handleExperience}>
                    立即体验
                </button>
            </div>
        </div>
    );
};

export default SplashScreen; 